<template>
  <div style="height: 1000px;">
    <head>
      <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    </head>
    <div style="display: flex; align-items: center;">
      <div style="font-size: 50px; color: darksalmon; font-family: 'Lobster', cursive; margin-right: 20px;">
        <strong>我的公告</strong>
      </div>
      <el-tooltip content="发布公告" placement="top">
        <el-icon @click="openAddNoticeDialog" :size="30"><EditPen /></el-icon>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="margin-left:40px;width: 95%;padding:50px 140px ;" max-height="500">
      <el-table-column fixed prop="Ntime" label="时间" width="200">
        <template #default="scope">
          <div>{{ getFormatTime(scope.row.Ntime) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="Title" label="标题" width="350" />
      <el-table-column prop="Content" label="内容" width="400">
        <template #default="scope">
            <div class="custom-cell">{{ scope.row.Content }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button link type="primary" size="large" @click.prevent="deleteRow(scope.row,scope.$index)">
            <el-icon><Delete /></el-icon>
          </el-button>
          <el-button link type="primary" size="large" @click="ShowNotice(scope.row)">
            <el-icon><MoreFilled /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
  
    <!-- 公告详情弹窗 -->
    <el-dialog v-model="dialogVisible" width="800px" :modal="false" :before-close="handleClose">
      <div style="text-align: left; margin-left:60px; margin-top: -40px; font-family: Arial; width:630px;">
        <p style="font-size: 26px; font-weight: 600;">{{ currentnotice.Title }}</p>
        <span style="font-size:20px; font-weight: 550;">发布时间：</span>
        <p style="font-size: 18px;">{{ getFormatTime(currentnotice.Ntime) }}</p>
        <span style="font-size: 20px; font-weight: 550;">公告内容：</span>
        <p style="font-size: 18px;" v-html="formattedContent"></p>
      </div>
    </el-dialog>
  
    <!-- 发布公告弹窗 -->
    <el-dialog v-model="addNoticeDialogVisible" title="发布公告">
      <el-form :model="newNotice" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="newNotice.Title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="newNotice.Content"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addNoticeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNotice">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </template>
  
  <script>
  // eslint-disable-next-line no-unused-vars
  import dayjs from 'dayjs';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        uid: '',
        Permissions: '',
        dialogVisible: false,
        addNoticeDialogVisible: false,
        now: new Date(),
        currentnotice: [],
        newNotice: {
          Title: '',
          Content: '',
        },
        fileList: [],
        tableData: [],
      };
    },
    methods: {
      getFormatTime(time) {
        let date = new Date(time); 
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0'); 
        let day = date.getDate().toString().padStart(2, '0');
        let hours = date.getHours().toString().padStart(2, '0');
        let minutes = date.getMinutes().toString().padStart(2, '0');
        let seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      deleteRow(row, index) {
        const formData2 = new FormData();
        formData2.append('nid', row.Nid);
        axios.post('/deleteNotice', formData2)
          .then(response => {
            if (response.data.success) {
              this.tableData.splice(index, 1);
              this.$message.success('成功删除公告');
            } else {
              this.$message.error('删除公告失败');
            }
          })
          .catch(error => {
            console.error(error);
            this.$message.error('An error occurred while deleting the notice');
          });
      },
      openAddNoticeDialog() {
        this.addNoticeDialogVisible = true;
      },
      submitNotice() {
        const formData = new FormData();
        formData.append('Uid', this.uid);
        formData.append('Title', this.newNotice.Title);
        formData.append('Content', this.newNotice.Content);
        formData.append('Ntime', new Date().toISOString());
        formData.append('Sender', this.Permissions);
  
        axios.post('/addNotice', formData)
          .then(response => {
            if (response.data.success) {
              this.$message.success('公告发布成功');
              this.addNoticeDialogVisible = false;
              this.fetchNotice();
            } else {
              this.$message.error('公告发布失败');
            }
          })
          .catch(error => {
            console.error(error);
            this.$message.error('An error occurred while adding the notice');
          });
      },
      fetchNotice() {
        const formData = new FormData();
        formData.append('uid', this.uid);
        axios.post('/noticemanage', formData)
          .then(response => {
            this.tableData = response.data.data.notices;
          })
          .catch(error => {
            console.log(error);
          });
      },
      ShowNotice(row) {
        this.dialogVisible = true;
        this.currentnotice = row;
      },
      handleClose() {
        this.dialogVisible = false;
      },
    },
    created() {
      this.uid = this.$store.state.userinfo.account;
      this.Permissions = this.$store.state.userinfo.permission;
      this.fetchNotice();
    },
    computed: {
      formattedContent() {
        return this.currentnotice.Content.replace(/\r\n|\n/g, '<br>');
      }
    }
  };
  </script>
  
  <style scoped>
  .custom-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>
  